import React, { Component } from 'react';
import './index.css';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as listActions from '../../store/actions/list';

interface Iprops{
    id:number,
    name:string,
    price:number,
    num:number,
    pic:string,
    parentIndex:number,
    changeNum:(status:string,parentIndex:number,id:number) => void
}

class Product extends Component <Iprops>{
    render() {
        let {id,name,price,num,pic,parentIndex} = this.props;
        return (
            <dl className="product">
                <dt>
                    <img src={pic} alt=""/>
                </dt>
                <dd>
                    <h6>{name}</h6>
                    <span>{price}</span>
                    <div>
                        <button style={{display:num>0?'block':'none'}}  onClick={() => {this.props.changeNum('-',parentIndex,id)}}>-</button>
                        <span  style={{display:num>0?'block':'none'}}>{num}</span>
                        <button onClick={() => {this.props.changeNum('+',parentIndex,id)}}>+</button>
                    </div>
                </dd>
            </dl>
        );
    }
}

let stateMapToProps = (state:any) => {
    return {}
}

let dispatchMapToProps = (dispatch:any) => {
    return bindActionCreators(listActions,dispatch)
}

export default connect(stateMapToProps,dispatchMapToProps)(Product) ;